
import React, { memo, useCallback } from 'react';


import sty from './sty.module.css';
import { changeIsShow } from '@/components/theme-login/store/actionCreator';


import SongHeader from '../detailHeader';
import SongsList from '../songsList';
import { message, Skeleton } from 'antd';
import { sendCollectSongsList } from '@/api/songs'
import { shallowEqual, useSelector } from 'react-redux';
import { useDispatch } from 'react-redux';


const SongLeft = () => {
  const { songDetail, isLogin, cookie } = useSelector(state => ({
    songDetail: state.getIn(['songList', 'songDetailInfo']),
    isLogin: state.getIn(['loginState', 'isLogin']),
    cookie: state.getIn(['loginState', 'cookie'])
  }), shallowEqual)

  const dispatch = useDispatch();

  const collectSongsList = useCallback(() => {
    if (isLogin) {
      sendCollectSongsList(songDetail.id).then(res => {
        if (res.code === 200) {
          message.success('收藏成功');
          return
        }
        message.error(res.message)
      })
    } else {
      message.warning('请先登陆');
      dispatch(changeIsShow(true))
    }
  }, [dispatch, isLogin, songDetail])



  return <div className={sty.root}>
    {
      !songDetail && <Skeleton active />
    }
    <SongHeader collectSongsList={collectSongsList} songDetail={songDetail} />
    <div className={sty.main}>
      <SongsList list={songDetail.tracks || []} />
    </div>
  </div>
}
export default memo(SongLeft)
